<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, all" />
  <title>WebGL Earth API - Hello World</title>

  <script src="../cesium/Build/Cesium/Cesium.js"></script>
  <script src="http://localhost:9810/compile?id=api-debug"></script>

  <script>
    var app;
    var mapB, mapO;
    var customTMS, wms;
    function startWE() {
      app = new WebGLEarth('webglearthdiv', {
        atmosphere: true,
        sky: false,
        position: [47.2, 8.5],
        altitude: 7000000,
        panning: true,
        tilting: true,
        zooming: true,
        proxyHost: 'http://srtm.webglearth.com/cgi-bin/corsproxy.fcgi?url='
      });

      app.showMiniGlobe('../deploy/world512.jpg', 128);

      // Get your own key from: https://www.bingmapsportal.com/
      var bingKey = 'AuCVBGPx1VQORSzUMGplLr3JTilLi3lUA3WnqT5SbKcUP5H2s9mh9XsHfy_VKmdG';

      mapB = app.initMap(WebGLEarth.Maps.BING, ['AerialWithLabels', bingKey]);
      mapO = app.initMap(WebGLEarth.Maps.OSM);
      app.setBaseMap(mapO);

      mapBo = app.initMap(WebGLEarth.Maps.BING, ['AerialWithLabels', bingKey]);
      mapOo = app.initMap(WebGLEarth.Maps.OSM);

      customTMS = app.initMap(WebGLEarth.Maps.CUSTOM, ['TMS','http://webglearth.googlecode.com/svn/resources/tms/{z}/{x}/{y}.jpg',1,5,256,true]);

      wms = app.initMap(WebGLEarth.Maps.WMS, ['BlueMarble', 'http://demo.mapserver.org/cgi-bin/wms?',
                                             '1.1.1', 'bluemarble,continents,country_bounds,cities', 'EPSG:3857', 'image/png', '',
                                             '', 1, 15]);

      //make the overlays transparent
      mapBo.setOpacity(0.5);
      mapOo.setOpacity(0.5);

      setInterval(function() {
        document.getElementById('infodiv').innerHTML = app.getHeading() + ', ' + app.getTilt();
      }, 100);


      //Print coordinates of the mouse
      var printCoords = function(e) {
        document.getElementById('coordsbox').innerHTML =
            (e.latitude + ', ' + e.longitude) + ' at ' +
            (e.offsetX + ', ' + e.offsetY);
      };
      app.on('mousemove', printCoords);

      //Show coordinates on click, then unregister the listener
      var listenKey;
      var alertCoords = function(e) {
        alert(e.latitude + ', ' + e.longitude);
        app.off(listenKey);
      };
      listenKey = app.on('click', alertCoords);
    }

    function addSomeMarkers() {
      var londonM = app.initMarker(51.507222, -0.1275);
      var denverM = app.initMarker(39.739167, -104.984722);
      var cairoM = app.initMarker(30.058056, 31.228889);

      londonM.bindPopup('<h2>London</h2>This marker is already opened.', 250).openPopup();
      denverM.bindPopup('<h2>Denver</h2>You can\'t see this marker without rotating the Earth.');

      cairoM.bindPopup('<h2>Cairo</h2>Click on me to close London\'s marker.').openPopup();

      var closeLondon = function(e) {
        alert(e.latitude + ', ' + e.longitude);
        londonM.closePopup();
      };
      cairoM.on('click', closeLondon);

      document.getElementById("addmarkers").disabled = true;
    }
    var colorQueryMarker;
    var intervalTimer;
    function queryColor() {
      if (!app) return;

      var lat = parseFloat(document.getElementById('colorlat').value, 10);
      var lng = parseFloat(document.getElementById('colorlng').value, 10);
      var colorbox = document.getElementById('colorbox');

      if (!colorQueryMarker) {
        colorQueryMarker = app.initMarker(lat, lng);
      } else {
        colorQueryMarker.setPosition(lat, lng);
      }

      if (intervalTimer) clearInterval(intervalTimer);
      intervalTimer = setInterval(function() {
        var res = app.getBestAvailablePixelColor(lat, lng);
        colorbox.innerHTML = res.toString();
        colorbox.style.backgroundColor = "rgba(" + res[0] + "," +
                                                   res[1] + "," +
                                                   res[2] + "," +
                                                   res[3] + ")";
      }, 500);
    }
  </script>

 </head>
 <body onload="javascript:startWE()">
   <div id="webglearthdiv" style="width:600px;height:400px;"></div>
   <div id="infodiv" style="height:20px;width:900px;"></div>
   <div id="coordsbox" style="height:20px;width:900px;"></div>
   <input type="button" value="Zoom to level 9.1" onclick="javascript:app.setZoom(9.1);"/>
   <input type="button" value="What's current zoom level?" onclick="javascript:alert(app.getZoom());"/>
   <input type="button" value="Set altitude to 5000km" onclick="javascript:app.setAltitude(5000000);"/>
   <input type="button" value="What's current altitude?" onclick="javascript:alert(app.getAltitude());"/>
   <br />
   <input type="button" value="Set position to Mount Everest" onclick="javascript:app.setPosition(27.988056, 86.925278);"/>
   <input type="button" value="What's current position?" onclick="javascript:alert(app.getPosition());"/>
   <input type="button" value="What's current target?" onclick="javascript:alert(app.getTarget());"/>
   <br />
   <input type="button" value="Heading 45 degrees" onclick="javascript:app.setHeading(45);"/>
   <input type="button" value="Tilt 20 degrees" onclick="javascript:app.setTilt(20);"/>
   <br />
   <input type="button" value="Make the app bigger!" onclick="javascript:document.getElementById('webglearthdiv').style.width='800px';app.handleResize();this.disabled=true;"/>
   <input type="button" value="Download as PNG" onclick="javascript:app.saveScreenshot('screenshot.png')"/>
   <input type="button" value="Display screenshot below" onclick="javascript:app.getScreenshot(function(url) {document.getElementById('screenshot').src = url;});"/>
   <br />
   <input type="button" value="Switch to OSM" onclick="javascript:app.setBaseMap(mapO)"/>
   <input type="button" value="Switch to Bing" onclick="javascript:app.setBaseMap(mapB)"/>
   <input type="button" value="Switch to Custom TMS" onclick="javascript:app.setBaseMap(customTMS)"/>
   <input type="button" value="Switch to WMS" onclick="javascript:app.setBaseMap(wms)"/>
   <input type="button" value="Switch Overlay to OSM" onclick="javascript:app.setOverlayMap(mapOo)"/>
   <input type="button" value="Switch Overlay to Bing" onclick="javascript:app.setOverlayMap(mapBo)"/>
   <input type="button" value="Disable overlay" onclick="javascript:app.setOverlayMap(null)"/>
   <br />
   <input type="button" value="Fly to Japan bounds" onclick="javascript:app.flyToFitBounds(22,48,122,154,90,20)" />
   <input type="button" value="Fly to Iceland @ 1000km" onclick="javascript:app.flyTo(65,-19,1000000)" />
   <input type="button" value="Fly to Japan @ unchanged" onclick="javascript:app.flyTo(35,138)" />
   <input type="button" value="Fly to the Statue of Liberty @ 500m with tilt and heading" onclick="javascript:app.flyTo(40.6894, -74.0446, 500, 20, 45, true)" />
   <input type="button" value="Jump to the Statue of Liberty @ 500m with tilt and heading" onclick="javascript:app.setPosition(40.6894, -74.0446, null, 500, 20, 45, true)"/>
   <br />
   <input type="button" value="Add some markers" id="addmarkers" onclick="javascript:addSomeMarkers()" />
   &nbsp;&nbsp;&nbsp;&nbsp;
   Pick color for position <input type="text" id="colorlat" value="32.65" size="8" />,<input type="text" id="colorlng" value="-16.9166" size="8" /> <input type="button" value="Query color" onclick="javascript:queryColor()" /><div id="colorbox" style="display:inline-block;width:150px;text-align:center;text-shadow:0 0 3px #fff;"></div>
   <br />
   <img id="screenshot" />
 </body>
</html>
